<template>
  <!-- 设置大屏外包裹div 这里大屏初始化不是全屏的，是嵌入在页面里，有菜单，如场景和我这里不同，可以去掉此div或者自行修改高度 -->
  <div id="app" class="container" ref="container">
    <!-- 大屏，方法对此div操作 -->
    <div class="screen" ref="bigscreen" :style="{backgroundImage:'url('+ imgObj.backgroundImage +')'}" style="background-size: 1920px 1080px;color: #FFFFFF;">
      <div style="padding: 0 15px;width: calc(100% - 30px);height: 100%;">
        <div id="header" :style="{backgroundImage:'url('+ imgObj.top +')'}">
          <div id="weather">
            <el-button type="primary" icon="el-icon-switch-button" circle @click="tuichu"></el-button>
            <!--              <img :src="'https://province-protrol.obs.cn-north-4.myhuaweicloud.com/icons/'+ qweather.icon +'.svg'" width="32">-->
            济南市 {{ qweather.temp }}℃ {{ qweather.text }} 风向：{{ qweather.windDir }}
          </div>
          <div id="title">气体报警数字化监管平台</div>
          <div id="time">
            <div class="year">{{ nowDate || 0 }}</div>
            <div class="week-day">{{ nowTime.weekDay || 0 }}</div>
            <div class="week">第{{ nowTime.todayYear || 0 }}周</div>
            <div class="time">
              <div>{{ nowTime.hour || 0 }}</div>
              :
              <div>{{ nowTime.minute || 0 }}</div>
              :
              <div>{{ nowTime.second || 0 }}</div>
            </div>
          </div>
        </div>
        <div id="left_div">
          <div class="left_div-below">
            <div class="titleImg" :style="{backgroundImage:'url('+ imgObj.titleImg +')'}">
              气体探测器历年趋势图
            </div>
            <div style="padding: 5px 20px;">
              <div class="warpper-top" id="over_these_years" style="width: 100%;"></div>
            </div>
          </div>
          <div class="left_div-top">
            <div class="titleImg" :style="{backgroundImage:'url('+ imgObj.titleImg +')'}">
              <selectView :visibleData="[{label: '按日', value: 0},{label: '按周', value: 1},{label: '按月', value: 2},{label: '按年', value: 3}]" @change="getOver_these_years2"></selectView>
              <div style="width: 100%;float: left;text-align: center;padding-left: 8px;margin-top: -5px;">
                气体预警趋势图
              </div>
            </div>
            <div style="padding: 5px 20px;">
              <div class="warpper-top">
                <div class="warpper-top" id="over_these_years2" style="width: 100%;"></div>
              </div>
            </div>
          </div>
          <div class="left_div-middle">
            <div class="titleImg" :style="{backgroundImage:'url('+ imgObj.titleImg +')'}">
              气体类型
            </div>
            <div style="padding: 5px 20px;">
              <div class="warpper-top">
                <div class="warpper-top" id="industry" style="width: 100%;"></div>
              </div>
            </div>
          </div>
          <div class="left_div-below">
            <div class="titleImg" :style="{backgroundImage:'url('+ imgObj.titleImg +')'}">
              报警类型
            </div>
            <div style="padding: 5px 20px;">
              <div class="warpper-top">
                <div class="warpper-top" id="industry2" style="width: 100%;"></div>
              </div>
            </div>
          </div>
          <!--        <div id="mingyangMap" style="width: 100px;height: 100px;"></div>-->
        </div>
        <div style="width: calc(100% - 920px);padding: 0 10px;height: calc(100% - 75px);float:left;">
          <!--          <div style="width: 970px;height: 45px;margin: 15px auto 0;">-->
          <!--            <div class="top_button" v-for="(item, index) in plainList" :key="index" style="float:left;margin: 0 4px;">-->
          <!--              <a @click="toUrl(item.value)" :class="item.value == 3?'bDiv':'aDiv'">{{ item.label }}</a>-->
          <!--            </div>-->
          <!--          </div>-->
          <div style="width: 100%;height: 80px;margin: 15px auto 0;">
            <div class="statistics" :style="{ backgroundImage: 'url('+ imgObj.menzhen_select +')' }">
              <img src="../../assets/image/shoushu_icon.png">
              <div>企业总数</div>
              <div ref="warn" data-time="1" :data-value="statistics.warn">0</div>
            </div>
            <div class="statistics" :style="{ backgroundImage: 'url('+ imgObj.menzhen_select +')' }">
              <img src="../../assets/image/kangjunyao_icon.png">
              <div>监管设备</div>
              <div ref="read" data-time="1" :data-value="statistics.read">0</div>
            </div>
            <div class="statistics" :style="{ backgroundImage: 'url('+ imgObj.menzhen_select +')' }">
              <img src="../../assets/image/pingjun_icon.png">
              <div>在线设备</div>
              <div ref="unread" data-time="1" :data-value="statistics.unread">0</div>
            </div>
            <div class="statistics" :style="{ backgroundImage: 'url('+ imgObj.menzhen_select +')' }">
              <img src="../../assets/image/chuyuan_icon.png">
              <div>离线设备</div>
              <div ref="receipt" data-time="1" :data-value="statistics.receipt">0</div>
            </div>
            <div class="statistics" :style="{ backgroundImage: 'url('+ imgObj.menzhen_select +')' }">
              <img src="../../assets/image/qiekou_icon.png">
              <div>预警数量</div>
              <div ref="rectifyAndReform" data-time="1" :data-value="statistics.rectifyAndReform">0</div>
            </div>
          </div>
          <!--          <div style="width: 100%;height: 430px;margin: 5px 0;overflow:hidden">-->
          <div style="width: 100%;height: 475px;margin: 5px 0;overflow:hidden">
            <baidumap :selectShow="true" :markerList="mapData" :center="{lng: 116.880389, lat: 35.76454}" :minZoom="12" :boundary="'山东省泰安市宁阳县'" style="width: 100%;height: 550px;"></baidumap>
          </div>
          <selectView :visibleData="[{label: '按月', value: 0}, {label: '按周', value: 1}]" @change="selectChange"></selectView>
          <div id="warn"></div>
        </div>
        <div id="right_div">
          <div class="right_div_distribution" style="padding-top: 10px;height: 21%;margin-bottom: 5px;">
            <div class="titleImg" :style="{backgroundImage:'url('+ imgObj.titleImg +')'}">安全动态</div>
            <div class="flow_path" @click="imageVisible = true">流程</div>
            <div class="notice" @click="getNoticeVisible()">通报</div>
            <div style="padding: 5px 20px;height: calc(100% - 10px);">
              <div style="border: 1px solid #48A2D1;padding: 10px;height: calc(100% - 62px);width: calc(100% - 20px);word-break:  break-all;white-space: pre-wrap;overflow-y: scroll;overflow-x: hidden;line-height: 24px;">
                <vue-seamless-scroll :data="trainingDays" :class-option="optionHover" class="seamless-warp" v-if="trainingDays[0]">
                  <div style="word-break: break-word;white-space: pre-line;">
                    <strong>2023-02-01 15:25:25</strong><br/><strong>【大风预警】</strong>济南市气象台2023年2月11日15时10分发布大风蓝色预警信号：受冷空气影响，预计12日上午到13日，我市大部分乡镇街道将出现平均风力5～6级阵风7～8级的偏北大风。另外，11日夜间到12日夜间全市阴有小雨转雨夹雪或小雪。此次冷空气伴有偏北大风和雨雪天气，对春运、室外作业等有不利影响，请提前做好防范工作。<br/>
                    <strong>2023-02-11 15:24</strong><br/><strong>【大风预警】</strong>受冷空气影响，预计12日上午到13日，我市大部分乡镇街道将出现平均风力5～6级阵风7～8级的偏北大风。另外，11日夜间到12日夜间全市阴有小雨转雨夹雪或小雪。此次冷空气伴有偏北大风和雨雪天气，对春运、室外作业等有不利影响，请提前做好防范工作。<br/>
                    <strong>2023-02-18 08:38</strong><br/><strong>【大风预警】</strong>济南市气象台2023年2月18日8时30分发布大风蓝色预警信号：受冷空气影响，预计今天傍晚到夜间，我市大部分乡镇街道将出现平均风力4～5级阵风7～8级的偏北大风。请有关单位和人员做好防范准备。<br/>
                  </div>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
          <div class="right_div_distribution" style="height: 21.5%;margin-bottom: 5px;">
            <div class="titleImg" :style="{backgroundImage:'url('+ imgObj.titleImg +')'}">报警治理情况</div>
            <div style="padding: 5px 20px;height: calc(100% - 10px);">
              <div style="float: left;width: calc(50% - 30px);height: 150px;margin: 15px;text-align: center;">
                <div id="left_shuiqiu" style="width: 100%;height: 100%;"></div>
                <div style="font-size: 14px;position: absolute;margin-top: -25px;text-align: center;width: 175px;">{{ statistics.troubleshooting }}%</div>
              </div>
              <div style="float: left;width: calc(50% - 30px);height: 150px;margin: 15px;text-align: center;">
                <div id="center_shuiqiu" style="width: 100%;height: 100%;"></div>
                <div style="font-size: 14px;position: absolute;margin-top: -25px;text-align: center;width: 175px;">{{ statistics.eliminate }}%</div>
              </div>
            </div>
          </div>
          <div class="right_div_distribution" style="height: 21%;margin-bottom: 10px;">
            <div style="padding: 5px 20px;height: calc(100% - 10px);">
              <div class="zebra" style="width: 100%;height: 35px;text-align: center;line-height: 35px;">
                <div style="float:left;width: 135px;">企业名称</div>
                <div style="float:left;width: 135px;">报警数量</div>
                <div style="float:left;width: 135px;">消除数量</div>
              </div>
              <div style="height: calc(100% - 45px);">
                <vue-seamless-scroll :data="governDetailList" :class-option="optionHover" class="seamless-warp" v-if="governDetailList[0]">
                  <div :class="index%2 == 0?'whiteHorse':'zebra'" v-for="(item,index) in governDetailList" :key="index" style="width: 100%;height: 35px;text-align: center;line-height: 35px;font-size: 14px;">
                    <div class="ellipsis" style="float:left;width: 135px;height: 35px;" v-if="item.companyName != null">{{item.companyName}}</div>
                    <div style="float:left;width: 135px;height: 35px;color: #01bdff;" v-if="item.bjNum != null">{{ item.bjNum }}</div>
                    <div style="float:left;width: 135px;height: 35px;color: #27c086;" v-if="item.xcNum != null">{{ item.xcNum }}</div>
                  </div>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
          <div class="right_div_distribution" style="height: 21%;">
            <div class="titleImg" :style="{backgroundImage:'url('+ imgObj.titleImg +')'}">预警情况</div>
            <div style="padding: 5px 20px;height: calc(100% - 40px);">
              <div class="zebra" style="width: 100%;height: 35px;text-align: center;line-height: 35px;">
                <div style="float:left;width: 40%;">企业名称</div>
                <div style="float:left;width: 60%;">预警类型</div>
              </div>
              <div style="height: calc(100% - 45px);">
                <vue-seamless-scroll :data="eventList" :class-option="optionHover" class="seamless-warp" v-if="eventList[0]">
                  <div :class="index%2 == 0?'whiteHorse':'zebra'" v-for="(item,index) in eventList" :key="index" style="width: 100%;height: 35px;text-align: center;line-height: 35px;font-size: 14px;">
                    <div class="ellipsis" style="float:left;width: 40%;height: 35px;" v-if="item.companyName != null">{{item.companyName}}</div>
                    <div style="float:left;width: 60%;height: 35px;" v-if="item.name != null">
                      <span style="color: #63b2ee">{{item.name}}</span>
                    </div>
                  </div>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>

        <el-dialog title="企业总数" :visible.sync="dialogTableVisible" :modal="false" :modal-append-to-body="false">
          <!--          <el-form ref="form" :model="query" label-width="80px">-->
          <!--            <el-form-item label="社区名称" style="width: 300px;float: left;">-->
          <!--              <el-input v-model="query.name"></el-input>-->
          <!--            </el-form-item>-->
          <!--            <el-button type="primary" @click="" style="float: left;">搜 索</el-button>-->
          <!--          </el-form>-->
          <el-table :data="trainingDays1.slice(0,10)" border>
            <el-table-column property="name" :label="yearStr">
              <template slot-scope="scope">
                <!-- 注意：这个地方要传参数进去才能进行操作  函数名称(scope.row) -->
                <div @click="shequ(scope.row)">{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column property="value1" label="立项审批阶段" width="200"></el-table-column>
            <el-table-column property="value2" label="项目建设阶段"></el-table-column>
            <el-table-column property="value3" label="归档运行阶段"></el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="街道总数" :visible.sync="dialogTableVisible1" :modal="false" :modal-append-to-body="false">
          <!--          <el-form ref="form" :model="query" label-width="80px">-->
          <!--            <el-form-item label="社区名称" style="width: 300px;float: left;">-->
          <!--              <el-input v-model="query.name"></el-input>-->
          <!--            </el-form-item>-->
          <!--            <el-button type="primary" @click="" style="float: left;">搜 索</el-button>-->
          <!--          </el-form>-->
          <el-table :data="trainingDays2.slice(0,10)" border>
            <el-table-column property="name" :label="yearStr">
              <template slot-scope="scope">
                <!-- 注意：这个地方要传参数进去才能进行操作  函数名称(scope.row) -->
                <div @click="jiedao(scope.row)">{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column property="value1" label="立项审批阶段" width="200"></el-table-column>
            <el-table-column property="value2" label="项目建设阶段"></el-table-column>
            <el-table-column property="value3" label="归档运行阶段"></el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogTableVisible1 = false">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="社区总数" :visible.sync="dialogTableVisible2" :modal="false" :modal-append-to-body="false">
          <!--          <el-form ref="form" :model="query" label-width="80px">-->
          <!--            <el-form-item label="社区名称" style="width: 300px;float: left;">-->
          <!--              <el-input v-model="query.name"></el-input>-->
          <!--            </el-form-item>-->
          <!--            <el-button type="primary" @click="" style="float: left;">搜 索</el-button>-->
          <!--          </el-form>-->
          <el-table :data="trainingDays3.slice(0,10)" border>
            <el-table-column property="name" :label="yearStr"></el-table-column>
            <el-table-column property="value1" label="立项审批阶段" width="200"></el-table-column>
            <el-table-column property="value2" label="项目建设阶段"></el-table-column>
            <el-table-column property="value3" label="归档运行阶段"></el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="dialogTableVisible2 = false">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="通报" :visible.sync="noticeVisible" width="520px" :modal="false" :modal-append-to-body="false">
          <div style="margin-top: -30px;width: 483px;height: 680px;">
            <el-button @click="handleExport(ddata, [ '排名', '项目', '报警数', '预警数量', '消除率'])" type="success" size="mini" style="position: absolute;float: right;margin-left: 270px;margin-top: 8px;">导出</el-button>
            <el-radio-group v-model="dradio" @change="dChange(dradio)" size="mini" style="position: absolute;float: right;margin-left: 330px;margin-top: 8px;">
              <el-radio-button label="本周"></el-radio-button>
              <el-radio-button label="本月"></el-radio-button>
            </el-radio-group>
            <class-lister @sort="sortDdata" :title="'气体报警排查治理情况通报'" :list="ddata" :field="[ 'name', 'ht', 'ew', 'eliminate']" :titleList="[ '项目', '报警数', '预警数量', '消除率']" :widthList="[ '130px', '65px', '85px', '85px', ]" :ranking="10" style="width: 100%;float: left;"></class-lister>
            <!--            <el-button @click="handleExport(wdata, [ '排名', '项目', '报警数', '预警数量', '消除率'])" type="success" size="mini" style="position: absolute;float: right;margin-left: 300px;margin-top: 8px;">导出</el-button>-->
            <!--            <el-radio-group v-model="wradio" @change="wChange(wradio)" size="mini" style="position: absolute;float: right;margin-left: 360px;margin-top: 8px;">-->
            <!--              <el-radio-button label="本周"></el-radio-button>-->
            <!--              <el-radio-button label="本月"></el-radio-button>-->
            <!--            </el-radio-group>-->
            <!--            <class-lister @sort="sortWdata" :title="'市政工程报警排查治理情况通报'" :list="wdata" :field="[ 'name', 'ht', 'ew', 'eliminate']" :titleList="[ '项目', '报警数', '预警数量', '消除率']" :widthList="[ '130px', '65px', '85px', '85px', ]" :ranking="10" style="width: 33.33%;float: left;"></class-lister>-->
            <!--            <el-button @click="handleExport(tdata, [ '排名', '项目', '报警数', '预警数量', '消除率'])" type="success" size="mini" style="position: absolute;float: right;margin-left: 300px;margin-top: 8px;">导出</el-button>-->
            <!--            <el-radio-group v-model="tradio" @change="tChange(tradio)" size="mini" style="position: absolute;float: right;margin-left: 360px;margin-top: 8px;">-->
            <!--              <el-radio-button label="本周"></el-radio-button>-->
            <!--              <el-radio-button label="本月"></el-radio-button>-->
            <!--            </el-radio-group>-->
            <!--            <class-lister @sort="sortTdata" :title="'特种装备报警排查治理情况通报'" :list="tdata" :field="[ 'name', 'ht', 'ew', 'eliminate']" :titleList="[ '项目', '报警数', '预警数量', '消除率']" :widthList="[ '130px', '65px', '85px', '85px', ]" :ranking="10" style="width: 33.33%;float: left;"></class-lister>-->
            <div id="dChart" style="width: 100%;height: 300px;float:left;"></div>
            <!--            <div id="wChart" style="width: 32%;height: 300px;float:left;"></div>-->
            <!--            <div id="tChart" style="width: 32%;height: 300px;float:left;"></div>-->
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="noticeVisible = false">关 闭</el-button>
          </div>
        </el-dialog>

        <el-dialog title="流程" :visible.sync="imageVisible" :modal="false" :modal-append-to-body="false">
          <div style="margin-top: -30px;width: 960px;height: 680px;">
            <!--            <img src="../../assets/image/liuchenbg-jn.jpg" style="width: calc(100% - 40px);height: 100%;"/>-->
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="imageVisible = false">关 闭</el-button>
          </div>
        </el-dialog>

      </div>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDeviceCountTrend, getWarnCountTrend, getTopCount, getBottomCount, getGovern, getGovernDetail, getEventList } from "@/api/api"
import axios from 'axios'
import backgroundImage from "@/assets/image/123123.jpg"
import top from "@/assets/image/top.png"
import titleImg from "@/assets/image/titleImg.png"
import menzhen_select from "@/assets/image/menzhen_select.png"
import {line_bar_chart} from "@/utils/echartsOption";
import selectView from "@/components/SelectView";
import baidumap from "@/components/baiduMap"
import classLister from "@/components/classLister"
import {dataConversionUtil} from "@/utils/leadingOutExcel";

const pasList = ['建设单位', '方案', '征求意见', '签订协议书', '书面告知住建局', '加装登记'];
const pcsList = ['委托施工单位', '项目建设', '施工过程质量安全监督', '竣工验收', '工程竣工验收备案'];
const arList = ['使用登记', '补助资金发放', '既有住宅增设电梯档案', '使用安全'];
export default {
  components: {
    selectView,
    classLister,
    baidumap
  },
  data() {
    return {
      scaleCoeff: 0,
      baseWidth: 1920,
      baseHeight: 937,

      nameListType,
      chinaJson: {},
      qweather:{},
      query:{},
      imgObj: {
        backgroundImage: backgroundImage,
        top: top,
        titleImg: titleImg,
        menzhen_select: menzhen_select,
      },
      imageVisible: false,
      nowDate: null, //存放年月日变量
      nowTime: {}, //存放时分秒变量
      timer: "", //定义一个定时器的变量
      wradio: "本周",
      tradio: "本周",
      dradio: "本周",
      wdata: [
        {name: "项目1", ht: "233", ew: "233", eliminate: "99%"},
        {name: "项目2", ht: "222", ew: "200", eliminate: "95%"},
        {name: "项目3", ht: "210", ew: "190", eliminate: "90%"},
        {name: "项目4", ht: "200", ew: "180", eliminate: "80%"},
        {name: "项目5", ht: "190", ew: "170", eliminate: "70%"},
        {name: "项目6", ht: "180", ew: "160", eliminate: "65%"},
        {name: "项目7", ht: "170", ew: "150", eliminate: "60%"},
        {name: "项目8", ht: "222", ew: "140", eliminate: "55%"},
      ],
      tdata: [
        {name: "项目1", ht: "233", ew: "233", eliminate: "99%"},
        {name: "项目2", ht: "222", ew: "200", eliminate: "95%"},
        {name: "项目3", ht: "210", ew: "190", eliminate: "90%"},
        {name: "项目4", ht: "200", ew: "180", eliminate: "80%"},
        {name: "项目5", ht: "190", ew: "170", eliminate: "70%"},
        {name: "项目6", ht: "180", ew: "160", eliminate: "65%"},
        {name: "项目7", ht: "170", ew: "150", eliminate: "60%"},
        {name: "项目8", ht: "222", ew: "140", eliminate: "55%"},
      ],
      ddata: [
        {name: "项目1", ht: "233", ew: "233", eliminate: "99%"},
        {name: "项目2", ht: "222", ew: "200", eliminate: "90%"},
        {name: "项目3", ht: "210", ew: "190", eliminate: "80%"},
        {name: "项目4", ht: "200", ew: "180", eliminate: "70%"},
        {name: "项目5", ht: "190", ew: "170", eliminate: "65%"},
        {name: "项目6", ht: "180", ew: "160", eliminate: "60%"},
        {name: "项目7", ht: "170", ew: "150", eliminate: "55%"},
        {name: "项目8", ht: "140", ew: "233", eliminate: "55%"},
      ],
      trainingDays1: [],
      plainList: [
        {
          label: "首页",
          value: 9,
        },
        {
          label: "建设工程",
          value: 0,
        },
        {
          label: "燃气安全",
          value: 1,
        },
        {
          label: "城市更新",
          value: 2,
        },
        {
          label: "安装电梯",
          value: 3,
        },
        {
          label: "直管公房",
          value: 4,
        },
        {
          label: "自建房",
          value: 5,
        },
        {
          label: "物业监管",
          value: 6,
        },
        {
          label: "消防审验",
          value: 7,
        },
        {
          label: "抗震防雷",
          value: 8,
        },
      ],
      areaVal: "",
      trainingDays:[
        {name:"宁阳县好日子食品有限公司",value1: "20",value2: "60",value4: "66" ,value3: "未按照规定内容排查",},
        {name:"宁阳县老干部活动中心",value1: "20",value2: "60",value4: "66" ,value3: "未按照规定时间报告",},
        {name:"泰安环宇食品有限公司",value1: "20",value2: "60",value4: "66" ,value3: "未及时予以消除",},
        {name:"宁阳宝岛大酒店",value1: "20",value2: "60",value4: "66" ,value3: "未能及时消除的报警未采取治理措施",},
        {name:"宁阳县轻工业总公司",value1: "20",value2: "60",value4: "66" ,value3: "未建立台账，未如实记录",},
        {name:"宁阳县轻工业总公司",value1: "20",value2: "60",value4: "66" ,value3: "未建立重大事故报警专门信息档案",},
        {name:"宁阳县创汇经贸有限公司",value1: "20",value2: "60",value4: "66" ,value3: "预期未处理预警提醒",},
        {name:"宁阳县华联商贸有限公司",value1: "20",value2: "60",value4: "66" ,value3: "未按照规定内容排查",},
        {name:"宁阳县建筑安装工程总公司",value1: "20",value2: "60",value4: "66" ,value3: "未能及时消除的报警未采取治理措施",},
        {name:"宁阳县水利工程公司",value1: "20",value2: "60",value4: "66" ,value3: "预期未处理预警提醒",},
        {name:"宁阳县好日子食品有限公司",value1: "20",value2: "60",value4: "66" ,value3: "未按照规定内容排查",},
        {name:"宁阳县老干部活动中心",value1: "20",value2: "60",value4: "66" ,value3: "未按照规定时间报告",},
        {name:"泰安环宇食品有限公司",value1: "20",value2: "60",value4: "66" ,value3: "未及时予以消除",},
        {name:"宁阳宝岛大酒店",value1: "20",value2: "60",value4: "66" ,value3: "未能及时消除的报警未采取治理措施",},
        {name:"宁阳县轻工业总公司",value1: "20",value2: "60",value4: "66" ,value3: "未建立台账，未如实记录",},
        {name:"宁阳县轻工业总公司",value1: "20",value2: "60",value4: "66" ,value3: "未建立重大事故报警专门信息档案",},
        {name:"宁阳县创汇经贸有限公司",value1: "20",value2: "60",value4: "66" ,value3: "预期未处理预警提醒",},
        {name:"宁阳县华联商贸有限公司",value1: "20",value2: "60",value4: "66" ,value3: "未按照规定内容排查",},
        {name:"宁阳县建筑安装工程总公司",value1: "20",value2: "60",value4: "66" ,value3: "未能及时消除的报警未采取治理措施",},
        {name:"宁阳县水利工程公司",value1: "20",value2: "60",value4: "66" ,value3: "预期未处理预警提醒",},
        {name:"宁阳县好日子食品有限公司",value1: "20",value2: "60",value4: "66" ,value3: "未按照规定内容排查",},
        {name:"宁阳县老干部活动中心",value1: "20",value2: "60",value4: "66" ,value3: "未按照规定时间报告",},
        {name:"泰安环宇食品有限公司",value1: "20",value2: "60",value4: "66" ,value3: "未及时予以消除",},
        {name:"宁阳宝岛大酒店",value1: "20",value2: "60",value4: "66" ,value3: "未能及时消除的报警未采取治理措施",},
        {name:"宁阳县轻工业总公司",value1: "20",value2: "60",value4: "66" ,value3: "未建立台账，未如实记录",},
        {name:"宁阳县轻工业总公司",value1: "20",value2: "60",value4: "66" ,value3: "未建立重大事故报警专门信息档案",},
        {name:"宁阳县创汇经贸有限公司",value1: "20",value2: "60",value4: "66" ,value3: "预期未处理预警提醒",},
        {name:"宁阳县华联商贸有限公司",value1: "20",value2: "60",value4: "66" ,value3: "未按照规定内容排查",},
        {name:"宁阳县建筑安装工程总公司",value1: "20",value2: "60",value4: "66" ,value3: "未能及时消除的报警未采取治理措施",},
        {name:"宁阳县水利工程公司",value1: "20",value2: "60",value4: "66" ,value3: "预期未处理预警提醒",},
      ],
      trainingDays2:[
        {name:"社区1",value1: "31",value2: "31",value3: "66",},
        {name:"社区2",value1: "32",value2: "32",value3: "64",},
        {name:"社区3",value1: "33",value2: "33",value3: "62",},
        {name:"社区4",value1: "34",value2: "34",value3: "64",},
        {name:"社区5",value1: "35",value2: "35",value3: "63",},
        {name:"社区6",value1: "36",value2: "36",value3: "62",},
      ],
      trainingDays3:[
        {name:"项目1",value1: pasList[Math.ceil(Math.random()*pasList.length-1)],value2: pcsList[Math.ceil(Math.random()*pcsList.length-1)],value3: arList[Math.ceil(Math.random()*arList.length-1)],},
        {name:"项目2",value1: pasList[Math.ceil(Math.random()*pasList.length-1)],value2: pcsList[Math.ceil(Math.random()*pcsList.length-1)],value3: arList[Math.ceil(Math.random()*arList.length-1)],},
        {name:"项目3",value1: pasList[Math.ceil(Math.random()*pasList.length-1)],value2: pcsList[Math.ceil(Math.random()*pcsList.length-1)],value3: arList[Math.ceil(Math.random()*arList.length-1)],},
        {name:"项目4",value1: pasList[Math.ceil(Math.random()*pasList.length-1)],value2: pcsList[Math.ceil(Math.random()*pcsList.length-1)],value3: arList[Math.ceil(Math.random()*arList.length-1)],},
        {name:"项目5",value1: pasList[Math.ceil(Math.random()*pasList.length-1)],value2: pcsList[Math.ceil(Math.random()*pcsList.length-1)],value3: arList[Math.ceil(Math.random()*arList.length-1)],},
        {name:"项目6",value1: pasList[Math.ceil(Math.random()*pasList.length-1)],value2: pcsList[Math.ceil(Math.random()*pcsList.length-1)],value3: arList[Math.ceil(Math.random()*arList.length-1)],},
      ],
      dialogTableVisible: false,
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      noticeVisible: false,
      statistics: {
        warn: 0,
        read: 0,
        unread: 0,
        receipt: 0,
        rectifyAndReform: 0,
        troubleshooting: 0,
        eliminate: 0,
      },
      condition: 0,
      mapData: [
        {
          lng: 116.880389,
          lat: 35.76454,
          show: true,
          companyName: '宁阳县轻工业总公司', //公司
          addressWorksite: '山东省泰安市宁阳县', //生产场所地址
          terriTory: '山东省泰安市宁阳县', //所属属地
          representativePerson: "张三", //法定代表人
          responsiblePerson: '李四', //企业负责人
          responsibleMobile: '18888888888', //企业负责人手机
          safetyResponsiblePersone: "王五", //安全负责人
          safetyResponsibleMobile: '16686888888', //安全负责人手机
          dutyPhone: '0531-0635', //安全值班电话
          industryCategory: 'A', //所属行业门类
          majorHazard: '有', //有无重大危险源
          safetyStandardGrad: '1', //安全生产标准化等级 1 一级 2 二级 3 三级
          safetyLicenseNo: 'QS211201027680', //安全生产许可证编号
          peopleEmployee: '544', //职工人数
          peopleHazard: '33', //危险化学品作业人员人数
          peopleOperation: '36', //特种作业人员人数
          companyStatus: '0', //企业状态 0正常，1停产，2涉密)
        },
        {
          lng: 116.938088,
          lat: 35.948436,
          show: false,
          companyName: '宁阳县好日子食品有限公司',
          addressWorksite: '山东省泰安市宁阳县', //生产场所地址
          terriTory: '山东省泰安市宁阳县', //所属属地
          representativePerson: "张三", //法定代表人
          responsiblePerson: '李四', //企业负责人
          responsibleMobile: '18888888888', //企业负责人手机
          safetyResponsiblePersone: "王五", //安全负责人
          safetyResponsibleMobile: '16686888888', //安全负责人手机
          dutyPhone: '0531-0635', //安全值班电话
          industryCategory: 'A', //所属行业门类
          majorHazard: '有', //有无重大危险源
          safetyStandardGrad: '1', //安全生产标准化等级 1 一级 2 二级 3 三级
          safetyLicenseNo: 'QS211201027680', //安全生产许可证编号
          peopleEmployee: '544', //职工人数
          peopleHazard: '33', //危险化学品作业人员人数
          peopleOperation: '36', //特种作业人员人数
          companyStatus: '0', //企业状态 0正常，1停产，2涉密)
        },
      ],
      governDetailList: [],
      eventList: [],
      yearStr: '',
      pasList: ['建设单位', '方案', '征求意见', '签订协议书', '书面告知住建局', '加装登记'],
      pcsList: ['委托施工单位', '项目建设', '施工过程质量安全监督', '竣工验收', '工程竣工验收备案'],
      arList: ['使用登记', '补助资金发放', '既有住宅增设电梯档案', '使用安全'],
    }
  },
  mounted() {
    this.calcRate()
    // 改变窗口大小重新绘制
    window.addEventListener('resize', this.resize)
    this.getOver_these_years()
    this.getOver_these_years2(0)
    let industryData1 = [
      {
        name: "可燃气体",
        value: 74
      },
      {
        name: "有毒气体",
        value: 33
      },
      {
        name: "有害气体",
        value: 33
      },
      {
        name: "腐蚀气体",
        value: 33
      },
      {
        name: "一氧化碳",
        value: 33
      },
      {
        name: "二氧化碳",
        value: 33
      },
      {
        name: "一氧化氮",
        value: 33
      },
      {
        name: "二氧化氮",
        value: 33
      }
    ]
    let industryData2 = [
      {
        name: "预警",
        value: 10
      },
      {
        name: "报警",
        value: 25
      },
      {
        name: "连锁",
        value: 25
      }
    ]
    this.getindustry('industry', industryData1, 0)
    this.getindustry('industry2', industryData2, 1)
    this.getSHuiqiu("center_shuiqiu", "消除率", ["#30eea4", "#1ecdc4"])
    this.getSHuiqiu("left_shuiqiu", "排查率", ["#2cd9fd", "#19a7f7"])
    this.getGovern()
    this.getGovernDetail()
    this.getEventList()
    this.getTopCount()
  },
  created() {
    this.getweather()
    if (localStorage.getItem("roles") == "head"){
      this.$router.push("/enterprise")
    }
  },
  methods: {
    tuichu(){
      localStorage.removeItem("token")
      this.$router.push('/login')
    },
    getGovern(){
      getGovern().then(res => {
        this.statistics.troubleshooting = res.data.data.pc
        this.statistics.eliminate = res.data.data.xc
      })
    },
    getGovernDetail(){
      getGovernDetail().then(res => {
        this.governDetailList = res.data.data
      })
    },
    getEventList(){
      getEventList().then(res => {
        this.eventList = res.data.data
      })
    },
    getTopCount(){
      getTopCount().then(res => {
        this.getNumberGrow(this.$refs.warn, res.data.data.company);
        this.getNumberGrow(this.$refs.read, res.data.data.device);
        this.getNumberGrow(this.$refs.unread, res.data.data.online);
        this.getNumberGrow(this.$refs.receipt, res.data.data.offline);
        this.getNumberGrow(this.$refs.rectifyAndReform, res.data.data.event);
        this.statistics.warn = res.data.data.company
        this.statistics.read = res.data.data.device
        this.statistics.unread = res.data.data.online
        this.statistics.receipt = res.data.data.offline
        this.statistics.rectifyAndReform = res.data.data.event
      })
    },
    sortDdata(it){
      this.ddata.sort((data1,data2)=>{
        if (it == 1){
          return (data2.ht-0)-(data1.ht-0) // 按年龄升序排
        }else if (it == 2){
          return (data2.ew-0)-(data1.ew-0) // 按年龄升序排
        }else if (it == 3){
          var val1 = data1.eliminate.slice(0, data1.eliminate.length-1);
          var val2 = data2.eliminate.slice(0, data2.eliminate.length-1);
          return (val2-0)-(val1-0) // 按年龄升序排
        }
      })
    },
    sortWdata(it){
      this.wdata.sort((data1,data2)=>{
        if (it == 1){
          return (data2.ht-0)-(data1.ht-0) // 按年龄升序排
        }else if (it == 2){
          return (data2.ew-0)-(data1.ew-0) // 按年龄升序排
        }else if (it == 3){
          var val1 = data1.eliminate.slice(0, data1.eliminate.length-1);
          var val2 = data2.eliminate.slice(0, data2.eliminate.length-1);
          return (val2-0)-(val1-0) // 按年龄升序排
        }
      })
    },
    sortTdata(it){
      this.tdata.sort((data1,data2)=>{
        if (it == 1){
          return (data2.ht-0)-(data1.ht-0) // 按年龄升序排
        }else if (it == 2){
          return (data2.ew-0)-(data1.ew-0) // 按年龄升序排
        }else if (it == 3){
          var val1 = data1.eliminate.slice(0, data1.eliminate.length-1);
          var val2 = data2.eliminate.slice(0, data2.eliminate.length-1);
          return (val2-0)-(val1-0) // 按年龄升序排
        }
      })
    },
    wChange(vatradio){
      this.wdata = [
        {name: "文庙街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "99%"},
        {name: "八仙桥街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "95%"},
        {name: "泗店街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "90%"},
        {name: "东疏街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "80%"},
        {name: "伏山镇街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "70%"},
        {name: "堽城镇", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "65%"},
        {name: "蒋集镇", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "60%"},
        {name: "磁窑镇", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "55%"},
      ]
    },
    tChange(vatradio){
      this.tdata = [
        {name: "文庙街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "99%"},
        {name: "八仙桥街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "95%"},
        {name: "泗店街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "90%"},
        {name: "东疏街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "80%"},
        {name: "伏山镇街道", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "70%"},
        {name: "堽城镇", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "65%"},
        {name: "蒋集镇", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "60%"},
        {name: "磁窑镇", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "55%"},
      ]
    },
    dChange(vatradio){
      this.ddata = [
        {name: "应急管理局", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "99%"},
        {name: "住建局", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "95%"},
        {name: "发改局", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "90%"},
        {name: "水利局", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "80%"},
        {name: "交通局", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "70%"},
        {name: "农业农村局", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "65%"},
        {name: "林业局", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "60%"},
        {name: "自然资源和规划局", ht: Math.ceil(Math.random()*100), ew: Math.ceil(Math.random()*100), eliminate: "55%"},
      ]
    },
    getindustry(id, data, type){
      var _this = this;
      let index = 0;
      var colorList = [
        '#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f',
        '#fb7293','#e7bcf3','#8378ea']
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        series: [{
          type: 'pie',
          roseType: 'angle',
          center: ['50%', '50%'],
          radius: type == 1?['0%', '70%']:['20%', '50%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}\n{d}%}',
            color: '#FFF',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 3,
                width: 3,
                height: 3,
              },
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1
              }
            }
          },
          data: data,
        }]
      };
      _this.myChartEwa = echarts.init(document.getElementById(id));
      _this.myChartEwa.setOption(option);
      _this.myChartEwa.on("click", res =>{
        if (type == 0){
          this.dialogTableVisible = true
        }
      })
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        _this.myChartEwa.resize();
      });
    },
    async getOver_these_years2(e){
      var _this = this;
      let data = [{type: 0,data: []}]
      let xData = []
      if (e == 0){
        await getWarnCountTrend({type: parseInt(e)+1}).then(res => {
          for (let i = 0;i<24;i++){
            xData.push(`${i+1}点`)
            data[0].data.push(0)
          }
          res.data.data.map(i => {
            data[0].data[parseInt(i.times)-1] = i.counts
          })
        })
      }else if (e == 1){
        await getWarnCountTrend({type: parseInt(e)+1}).then(res => {
          for (let i = 0;i<52;i++){
            xData.push(`第${i+1}周`)
            data[0].data.push(0)
          }
          res.data.data.map(i => {
            data[0].data[parseInt(i.times)-1] = i.counts
          })
        })
      }else if (e == 2){
        await getWarnCountTrend({type: parseInt(e)+1}).then(res => {
          xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          for (let i = 0;i<12;i++){
            data[0].data.push(0)
          }
          res.data.data.map(i => {
            data[0].data[parseInt(i.times)-1] = i.counts
          })
        })
      }else if (e == 3){
        await getWarnCountTrend({type: parseInt(e)+1}).then(res => {
          xData = [2017, 2018, 2019, 2020, 2021, 2022, 2023]
          xData.map(i => {
            const index = res.data.data.map(item => item.times).indexOf(i)
            if (index != -1){
              data[0].data.push(res.data.data[index].counts)
            }else{
              data[0].data.push(0)
            }
          })
        })
      }
      const option = line_bar_chart({ xData: xData, data: data, color: [ ["#00feff", "#0286ff"], ["#fccb05", "#fccb05"]], type: 1, grid: this.condition == 0?[ "30px", "3%", "0%", "4px"]:[ "30px", "20px", "0%", "4px"], dataZoom: e == 1, barWidth: '12px'})
      _this.myChartEwa = echarts.init(document.getElementById("over_these_years2"));
      _this.myChartEwa.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        _this.myChartEwa.resize();
      });
      _this.myChartEwa.on("click", res =>{
        _this.yearStr = res.name
        _this.dialogTableVisible = true
      })

    },
    shequ(){
      this.dialogTableVisible = false
      this.dialogTableVisible1 = true
    },
    jiedao(){
      this.dialogTableVisible1 = false
      this.dialogTableVisible2 = true
    },
    handleExport(list, title){
      var tableHeader = [ title ]
      let dataList = []
      var i = 0;
      list.forEach((item,index) => {
        dataList.push([
          i+1,
          item.name,
          item.ht,
          item.ew,
          item.eliminate,
        ])
        i++
      })
      dataConversionUtil.dataToExcel(new Date().getTime(), tableHeader, dataList)
    },
    toUrl(value){
      var url = ""
      if (value == 0){
        url = '/elevatorUnderConstruction'
      }else if (value == 3){
        url = '/elevatorZone'
      }else if (value == 9){
        url = '/hacb'
      }
      this.$router.push(url)
    },
    getNoticeVisible(){
      var _this = this;
      _this.noticeVisible = true
      setTimeout(function() {
        // _this.getTradeChart("wChart", ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8'])
        // _this.getTradeChart("tChart", ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8'])
        _this.getTradeChart("dChart", ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8'])
      }, 1000)
    },
    getTradeChart(id, xData){
      var _this = this;
      let data = [{type: 0,data: []}, {type: 0,data: []}, {type: 0,data: []}, {type: 0,data: []}]
      for (var i = 0;i < data.length;i++){
        data[i].data = [Math.ceil(Math.random()*100),Math.ceil(Math.random()*100),Math.ceil(Math.random()*100),Math.ceil(Math.random()*100),Math.ceil(Math.random()*100),Math.ceil(Math.random()*100),Math.ceil(Math.random()*100),Math.ceil(Math.random()*100)]
      }
      const tradeChartoption = line_bar_chart({ barWidth: '12px', legend: ['本周预警总数', '本周扣分数', '本月预警数', '本月扣分数'], xData: xData, data: data, color: [ ["#32c5e9"], ["#9fe6b8"], ["#ffdb5c"], ["#ff9f7f"]], type: 1, grid: [ "30px", "20px", "0%", "4px"], fontColor: 'black', dataZoom: true})
      _this.tradeChart = echarts.init(document.getElementById(id));
      _this.tradeChart.setOption(tradeChartoption);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        _this.tradeChart.resize();
      });
    },
    getVatChart(){
      var _this = this;
      let data = [{type: 0,data: []}, {type: 0,data: []}, {type: 0,data: []}, {type: 0,data: []}]
      let xData = []
      xData = []
      for (var i = 0; i < this.paStreet.length;i++){
        xData.push(this.paStreet[i].label)
        for (var x = 0;x < data.length;x++){
          data[x].data.push(Math.ceil(Math.random()*100))
        }
      }
      const vatChartoption = line_bar_chart({ barWidth: '12px', legend: ['本周预警总数', '本周扣分数', '本月预警数', '本月扣分数'], xData: xData, data: data, color: [ ["#32c5e9"], ["#9fe6b8"], ["#ffdb5c"], ["#ff9f7f"] ], type: 1, grid: [ "30px", "20px", "0%", "4px"], fontColor: 'black', dataZoom: true})
      _this.vatChart = echarts.init(document.getElementById("vatChart"));
      _this.vatChart.setOption(vatChartoption);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        _this.vatChart.resize();
      });
    },
    selectChange(item){
      this.condition = item
      this.getwarn("warn")
    },
    getAreaVal(item){
      this.areaVal = item
      var mapJson = require("@/assets/ningyangMap/ningyang.json"); // 直接引入json文件
      let mapsuiji = mapJson.features[0].geometry.coordinates[0][0]
      var mapData = [
        {
          value: mapsuiji[Math.ceil(Math.random()*646)],
          name: '山东睿泽网络科技有限公司',
        },
        {
          value: mapsuiji[Math.ceil(Math.random()*646)],
          name: '山东省宁阳县华联商贸有限公司',
        },
        {
          value: mapsuiji[Math.ceil(Math.random()*646)],
          name: '宁阳县创汇经贸有限公司',
        },
        {
          value: mapsuiji[Math.ceil(Math.random()*646)],
          name: '宁阳县轻工业总公司',
        },
        {
          value: mapsuiji[Math.ceil(Math.random()*646)],
          name: '宁阳县轻工业总公司',
        },
        {
          value: mapsuiji[Math.ceil(Math.random()*646)],
          name: '宁阳宝岛大酒店',
        },
        {
          value: mapsuiji[Math.ceil(Math.random()*646)],
          name: '泰安环宇食品有限公司',
        },
        {
          value: mapsuiji[Math.ceil(Math.random()*646)],
          name: '宁阳县老干部活动中心',
        },
        {
          value: mapsuiji[Math.ceil(Math.random()*646)],
          name: '宁阳县好日子食品有限公司',
        }
      ];
      // this.ningyangMap3D("", "ningyang", mapData)
      this.statistics = {
        warn: 110,
        read: 110,
        unread: Math.ceil(Math.random()*300),
        receipt: Math.ceil(Math.random()*300),
        rectifyAndReform: Math.ceil(Math.random()*300),
        hiddenTrouble: Math.ceil(Math.random()*100),
      }
      this.getwarn("warn")
    },
    getOver_these_years(){
      var _this = this;
      let data = [{type: 0,data: []},{type: 2,data: []}]
      let xData = []

      getDeviceCountTrend().then(res => {
        console.log("res", res.data.data)
      })

      xData = ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年']
      data[0].data = [80, 180, 280, 330, 380, 430, 480]
      data[1].data = data[0].data
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'cross'},
          extcraCssText: 'z-index: 9999',
          formatter:function(params){
            var str = params[0].name + "<br/>"
            for (var i = 0;i < params.length;i++){
              if ((i+1)%2 == 0){
                str += params[i].marker + params[i].seriesName + "  " + params[i].value + "<br/>"
              }else {
                str += params[i].marker + params[i].seriesName + "  " + params[i].value
              }
            }
            return str;
          },
        },
        grid: {
          bottom: "3%",
          containLabel: true,
          left: "0%",
          right: "4px",
          top: "30px"
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisPointer: {
              label: {
                backgroundColor: '#FFF',
                color: '#000',
                show: true,
              }
            },
            axisLine: {
              lineStyle: {
                color: "#FFF"
              }
            }
          }
        ],
        yAxis: [
          {
            show: true,
            type: 'value',
            axisLine: {
              lineStyle: {
                color: "#FFF"
              }
            },
            axisPointer: {
              label: {
                backgroundColor: '#FFF',
                color: '#000',
                show: true,
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            show: true,
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#FFF"
              }
            },
            axisPointer: {
              label: {
                backgroundColor: '#FFF',
                color: '#000',
                show: true,
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name:'房建工程',
            type:'bar',
            stack: '1',
            data:[200, 150, 200, 193, 150, 200, 193,],
            barWidth: '13px',
            itemStyle: {
              normal: {
                color: '#01b5ff'
              }
            },
          },
          {
            name:'市政工程',
            type:'bar',
            stack: '1',
            data:[100, 150, 200, 193, 150, 200, 193,],
            barWidth: '13px',
            itemStyle: {
              normal: {
                color: '#f8a32b'
              }
            },
          },
          {
            name:'起重机械',
            type:'bar',
            stack: '2',
            data:[100, 100, 133, 128, 100, 133, 128,],
            barWidth: '13px',
            itemStyle: {
              normal: {
                color: '#f05361'
              }
            },
          },
          {
            name:'施工升降机',
            type:'bar',
            stack: '2',
            data:[100, 120, 133, 128, 120, 133, 128,],
            barWidth: '13px',
            itemStyle: {
              normal: {
                color: '#dd7fc6'
              }
            },
          },
          {
            name:'场内机动车',
            type:'bar',
            stack: '2',
            data:[100, 80, 134, 129, 80, 134, 129],
            barWidth: '13px',
            itemStyle: {
              normal: {
                color: '#f7e79f'
              }
            },
          },
        ]
      }
      _this.myChartEwa = echarts.init(document.getElementById("over_these_years"));
      _this.myChartEwa.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        _this.myChartEwa.resize();
      });
    },
    async getwarn(id){
      var _this = this;
      let data = [{type: 0,data: []},{type: 0,data: []}]
      let xData = []
      if (this.condition == 0){
        await getBottomCount({type: 1}).then(res => {
          xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          data[0].data = [0,0,0,0,0,0,0,0,0,0,0,0]
          data[1].data = [0,0,0,0,0,0,0,0,0,0,0,0]
          const list = res.data.data
          list.pc.map(i => {
            data[0].data[i.times-1] = i.total
          })
          list.xc.map(i => {
            data[1].data[i.times-1] = i.total
          })
        })
      }else {
        await getBottomCount({type: 2}).then(res => {
          for (var i = 0;i < 52;i++){
            xData.push(`第${i+1}周`)
            data[0].data.push(0)
            data[1].data.push(0)
          }
          const list = res.data.data
          list.pc.map(i => {
            data[0].data[i.times-1] = i.total
          })
          list.xc.map(i => {
            data[1].data[i.times-1] = i.total
          })
        })
      }
      const option = line_bar_chart({ legend: ['排查数量', '消除数量'], xData: xData, data: data, color: [ ["#00feff", "#0286ff"], ["#30eea4", "#1ecdc4"], ["#fbc808", "#fbb028"]], type: 1, grid: this.condition == 0?[ "30px", "3%", "0%", "4px"]:[ "30px", "20px", "0%", "4px"], dataZoom: this.condition != 0, barWidth: '12px'})
      _this.myChartEwa = echarts.init(document.getElementById(id));
      _this.myChartEwa.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        _this.myChartEwa.resize();
      });
    },
    setWidth(item) {
      let width;
      if (item) {
        width = "width:" + item.toString() + "px";
      }
      return width;
    },
    getSHuiqiu(id, title, color){
      var _this = this;
      const option = {
        graphic: [{
          type: 'group',
          left: 'center',
          top: '10%',
          children: [{
            type: 'text',
            style: {
              fill: '#fff',
              text: title,
              fontSize: 16
            }
          }]
        }],
        series: [{
          type: 'liquidFill',
          waveAnimation: 5,
          data: [0.45, 0.45],
          color: color,
          amplitude: 10,
          radius: '50%',
          backgroundStyle: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.75,
              colorStops: [{
                offset: 0.5,
                color: 'rgb(11,27,52)' // 0% 处的颜色
              }, {
                offset: 0.75,
                color: color[0] // 100% 处的颜色
              }, {
                offset: 0.95,
                color: color[1] // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          },
          outline: {
            show: false
          },
          label: {
            normal: {
              formatter: ""
            }
          }
        }]
      };
      _this.myChartEwa = echarts.init(document.getElementById(id));
      _this.myChartEwa.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        _this.myChartEwa.resize();
      });
    },
    getweather(){
      const url = "https://devapi.qweather.com/v7/weather/now?key=7bc8b36536c74cd3ad71c31b091660f0&location=101120108"
      axios.get(url).then(res => {
        this.qweather = res.data.now
      })
    },
    ningyangMap3D(chinaJson, json, mapData){
      var _this = this;
      var mapJson = chinaJson?chinaJson:require("@/assets/ningyangMap/ningyang.json"); // 直接引入json文件
      _this.myChartEwa = echarts.init(document.getElementById("ningyangMap"));

      echarts.registerMap('area', mapJson);
      var outdata = []; //地图区域挂载数据
      var maxData = parseInt(mapData[0].value); //热力最大值
      var minData = parseInt(mapData[0].value); //热力最小值
      mapData.forEach(function (item, index) {
        var num = parseInt(item.value);
        num >= maxData && (maxData = num);
        num <= minData && (minData = num);
        outdata.push({
          name: item.name,
          value: item.value[2],
          index: index,
        });
      });
      var option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            var str = '';
            if (params.componentSubType != "lines" && params.name != "宁阳县"){
              str += "<div style='border: 1px solid #f5f5f5;height: 60px;width: 200px;'><div style='border-bottom: 1px solid blue;width: 100%;height: 20px;'>"+ params.name +"</div>" +
                  "<div style='word-break:  break-all;white-space: pre-wrap;'>地址：山东省泰安市宁阳县</div></div>"
            }else{
              str += "<div style='border: 1px solid #f5f5f5;min-height: 60px;width: 200px;'><div style='border-bottom: 1px solid blue;width: 100%;height: 20px;font-size: 16px;font-weight: 700;'>宁阳县</div>" +
                  "<div style='word-break:  break-all;white-space: pre-wrap;'>简介：隶属于山东省泰安市，位于鲁中偏西，泰安市南部，东邻新泰市，西连汶上县，南与兖州市交界，东南与曲阜市、泗水县接壤，北以大汶河为界与岱岳区、肥城市相望。</div></div>"
            }
            return str;
          },
        },
        // 地图的阴影底图
        geo: {
          map: 'area',
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          aspectScale: 0.9,
          layoutCenter: ['50%', '52.5%'], //地图位置
          layoutSize: '170%',
          itemStyle: {
            normal: {
              shadowColor: 'rgba(0,228,242,0.5)',
              shadowBlur: 5,
              color: '#082A52',
            },
            emphasis: {
              areaColor: '#082A52',
            },
          },
          z: 2,
        },
        select: {
          // 点击后鼠标离开样式
          itemStyle: {
            color: "#FFF",
            areaColor: {
              type: 'linear-gradient',x: 0,y: 300,x2: 0,y2: 0,
              colorStops: [
                {offset: 0,color: '#0a56BC', },
                {offset: 1,color: '#12A6F2',},
              ],
              global: true, // 缺省为 false
            }, // 上层地图面的颜色
          },
        },
        series: [
          {
            type: 'map',
            map: 'area',
            aspectScale: 0.9,
            layoutCenter: ['50%', '50%'], //地图位置
            layoutSize: '170%',
            label: {
              normal: {
                show: true,
                fontFamily: 'SourceHanSansCN',
                fontSize: '20',
                color: '#FEFEFE',
              },
              emphasis: {
                show: true,
                fontFamily: 'SourceHanSansCN',
                fontSize: '20',
                color: '#FEFEFE',
              },
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0,0,0, 0.6)',
                borderWidth: 0.8,
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#0a56BC', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#12A6F2',
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                shadowColor: 'rgba(0, 0, 0, 1)',
                shadowBlur: 10,
                shadowOffsetX: 5,
                shadowOffsetY: 5,
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#1090e3', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#0a56bc',
                    },
                  ],
                },
              },
            },
            zlevel: 1,
            data: outdata,
          },
          // {
          //   name: '北京市',
          //   type: 'lines',
          //   zlevel: 2,
          //   symbolSize: 10,
          //   lineStyle: {
          //     normal: {
          //       color:'#ffae12',
          //       width: 4,
          //       opacity:0.5,
          //       curveness:0.2
          //     }
          //   },
          //   data: mapData.map(function (dataItem) {
          //     return {
          //       fromName: mapData[0].name,
          //       toName: dataItem.name,
          //       coords: [
          //         mapData[7].value,
          //         dataItem.value
          //       ]
          //     }
          //   })
          // },
          //散点
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'stroke',
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(0,228,242,0.5)',
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(0,228,242,0.8)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,228,242,1)',
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            label: {
              normal: {
                color: '#FFF',
                formatter: '{b}',
                position: 'top',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            symbol: 'circle',
            symbolSize: function (val) {
              // return (val[2] / maxData) * 4;
              return 10
            },
            data: mapData.slice(0,4),
            zlevel: 1,
          },
          //散点
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'stroke',
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'red',
                    },
                    {
                      offset: 0.8,
                      color: 'red',
                    },
                    {
                      offset: 1,
                      color: 'red',
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            label: {
              normal: {
                color: '#FFF',
                formatter: '{b}',
                position: 'top',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            symbol: 'circle',
            symbolSize: function (val) {
              // return (val[2] / maxData) * 4;
              return 10
            },
            data: mapData.slice(4,6),
            zlevel: 1,
          },
          //散点
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'stroke',
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'yellow',
                    },
                    {
                      offset: 0.8,
                      color: 'yellow',
                    },
                    {
                      offset: 1,
                      color: 'yellow',
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            label: {
              normal: {
                color: '#FFF',
                formatter: '{b}',
                position: 'top',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            symbol: 'circle',
            symbolSize: function (val) {
              // return (val[2] / maxData) * 4;
              return 10
            },
            data: mapData.slice(6,9),
            zlevel: 1,
          },
        ],
      };

      _this.myChartEwa.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        _this.myChartEwa.resize();
      });
    },
    getNumberGrow (ele, value) {
      let _this = this
      let step = (value * 10) / 500
      let current = 0
      let start = 0
      let t = setInterval(function () {
        start += step
        if (start > value) {
          clearInterval(t)
          start = value
          t = null
        }
        if (current === start) {
          return
        }
        current = parseFloat(start).toFixed(0)
        ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
      }, 10)
    },
    color16(){//十六进制颜色随机
      var r = Math.floor(Math.random()*256);
      var g = Math.floor(Math.random()*256);
      var b = Math.floor(Math.random()*256);
      var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
      return color;
    },
    //每天的数据
    getTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();

      //const str = ''
      if (this.hour > 12) {
        this.hour -= 12;
        this.str = " PM";
      } else {
        this.str = " AM";
      }
      this.month = check(month);
      this.day = check(day);
      this.hour = check(hour);
      this.minute = check(minute);
      this.second = check(second);

      function check(i) {
        const num = i < 10 ? "0" + i : i;
        return num;
      }

      let initTime = new Date();
      initTime.setMonth(0); // 本年初始月份
      initTime.setDate(1); // 本年初始时间
      let differenceVal = date - initTime; // 今天的时间减去本年开始时间，获得相差的时间
      let todayYear = Math.ceil(differenceVal / (24 * 60 * 60 * 1000)); // 获取今天是今年第几天

      let weekDay = "星期" + "日一二三四五六".charAt(new Date().getDay());
      this.nowDate = year + "年" + this.month + "月" + this.day + "日";
      this.nowTime = {
        hour: this.hour,
        minute: this.minute,
        second: this.second,
        weekDay: weekDay,
        todayYear: Math.ceil(todayYear / 7),
      };

      // this.hour + ":" + this.minute + ":" + this.second + "  " + this.str;
    },
    calcRate() {
      let db = this.$refs.bigscreen
      if (db && this.$refs.container.offsetWidth) {
        //这里是以宽为准来等比例压缩，若需求不同 可以根据代码进行修改
        this.scaleCoeff = (Number(this.$refs.container.offsetWidth)/ this.baseWidth).toFixed(5)
        if(this.scaleCoeff>0.60){
          this.$refs.container.style.overflow="inherit"
        }else{
          this.$refs.container.style.overflow="hidden"
        }
        db.style.transform = 'scale(' + this.scaleCoeff + ') translate(0%,0%)'

      }
    },
    resize() {
      this.calcRate()
    },
  },
  computed: {
    //滚动表格的配置项
    optionHover() {
      return {
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        step: 0.5,// 数值越大速度滚动越快
        openWatch: true, // 开启数据实时监控刷新dom
        limitMoveNum: 3, //开始滚动的数据量
        // singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        // waitTime: 1000 //单步运动停止的时间(默认值1000ms)
      }
    }
  },
}
const nameListType = new Map([
  [
    1,
    " background:linear-gradient(90deg, #EB3B5A 0%, #FE9C5A 100%);",
  ],
  [
    2,
    " background:linear-gradient(90deg, #FA8231 0%, #FFD14C 100%);",
  ],
  [
    3,
    " background:linear-gradient(90deg, #F7B731 0%, #FFEE96 100%);",
  ],
  [
    4,
    "background:linear-gradient(90deg, #395CFE 0%, #2EC7CF 100%)",
  ],
  [
    5,
    "background:linear-gradient(90deg, #395CFE 0%, #2EC7CF 100%)",
  ],
  [
    6,
    "background:linear-gradient(90deg, #395CFE 0%, #2EC7CF 100%)",
  ],
  [
    7,
    "background:linear-gradient(90deg, #395CFE 0%, #2EC7CF 100%)",
  ],
  [
    8,
    "background:linear-gradient(90deg, #395CFE 0%, #2EC7CF 100%)",
  ],
  [
    9,
    "background:linear-gradient(90deg, #395CFE 0%, #2EC7CF 100%)",
  ],
  [
    10,
    "background:linear-gradient(90deg, #395CFE 0%, #2EC7CF 90%);",
  ],
])
</script>
<style lang="postcss" scoped>
/deep/.top_button a:before{
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
/deep/ .select{
  float: right;
  position: relative;
  margin-bottom: -20px;
  z-index: 999;
  width: 60px;
  height: 25px;
  font-size: 14px;
  background-color: rgba(0, 128, 254, 0.01);
  color: #fff;
  border: none;
  outline: none;
  box-shadow: 1px 0 0 0 rgba(0, 128, 254, 0.42),
  0 1px 0 0 rgba(0, 128, 254, 0.42), 0 0 1px 0 rgba(0, 128, 254, 0.42),
  0 0 0 1px rgba(0, 128, 254, 0.42);
}
/deep/ .select-option {
  background-color: #050722 !important;
  color: #fff;
}
/deep/ .el-dialog {
  margin-top: 5vh !important;
}
</style>
<style lang="scss" scoped>
.zebra{
  background-color: #04385e;
}
.whiteHorse{
  background-color: #05294a;
}
.container {
  width: 100%;
}
.screen {
  width: 1920px;
  height: 1080px;
  background-color: rgb(18, 18, 75);
  position: relative;
  transform-origin: left top;
}
#header{
  width: 100%;
  height: 45px;
  background-size: 100% 100%;

  #weather{
    height: 45px;
    width: calc((100% - 600px)/2);
    color: #48A2D1;
    float: left;
    line-height: 60px;
    font-size: 14px;
  }

  #title{
    width: 600px;
    height: 45px;
    float:left;
    font-weight: 700;
    font-size: 25px;
    text-align: center;
  }

  #time{
    height: 45px;
    width: calc((100% - 600px)/2);
    float: left;
    display: flex;
    justify-content: right;
    align-items: center;
    position: absolute;
    right: 15px;
    top: 8px;

    .year,
    .week-day,
    .week {
      font-size: 14px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #48A2D1;
      margin-right: 10px;
    }

    .time {
      margin-left: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #48A2D1;
      > div {
        background: url(../../assets/image/right-date.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 6px;
        width: 22px;
        height: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
#left_div{
  width: 450px;
  height: calc(100% - 75px);
  float: left;
}
.left_div-top{
  width: 100%;
  height: 210px;
  padding-top: 10px;
  background-image: url('../../assets/image/450_375.png');
  background-size: 100% 100%;
}
.left_div-top_label{
  border-left: 3px solid #00e4ff;
  background-image: linear-gradient(to left, #01476b, #032843);
  color: #FFF;
  padding: 4.5px;
  //display:inline-block;
  cursor: pointer;
}
.left_div-top_label:hover{
  border-left: 3px solid #00e4ff;
  background-image: linear-gradient(to left, #409eff, #014366);
  color: #FFF;
  padding: 4.5px;
  //display:inline-block;
  cursor: pointer;
}
.left_div-top_label_active{
  border-left: 3px solid #00e4ff;
  background-image: linear-gradient(to left, #409eff, #014366);
  color: #FFF;
  font-weight: 700;
  font-size: 16px;
  padding: 4.5px;
  //display:inline-block;
  cursor: pointer;
}
.left_div-middle{
  width: 100%;
  height: 210px;
  margin-top: 5px;
  padding-top: 10px;
  background-image: url('../../assets/image/450_230.png');
  background-size: 100% 100%;
}
.left_div-below{
  width: 100%;
  height: 210px;
  margin-top: 10px;
  background-image: url('../../assets/image/450_230.png');
  background-size: 100% 100%;
}
#trade{
  width: 100%;
  height: 180px;
}
#right_div{
  width: 450px;
  height: calc(100% - 75px);
  float: left;
}
.titleImg{
  width: 415px;
  height: 30px;
  margin: 0 auto;
  background-size: 100% 30px;
  line-height: 28px;
  text-align: center;
  font-size: 18px;
}
#ningyangMap{
  width: 100%;
  height: calc(100% - 555px);
  float: left;
}
#warn{
  width: 100%;
  height: 275px;
  float: left;
}
.seamless-warp{
  height: 100%;
  width: 100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.right_div_distribution{
  width: 100%;
  height: 24%;
  background-image: url("../../assets/image/450_240.png");
  background-size: 100% 100%;
}
.notice{
  position: relative;
  width: 45px;
  float: right;
  margin: -27px 25px 0 0;
  cursor: pointer;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  color: #f78b8b;
  border-radius: 15px;
  padding: 2px;
  text-align: center;
  font-size: 13px;
}
.flow_path{
  position: relative;
  width: 45px;
  float: left;
  margin: -27px 0 0 27px;
  cursor: pointer;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  color: #f78b8b;
  //background-color: #f0f9eb;
  //border: 1px solid #c2e7b0;
  //color: #67c23a;
  border-radius: 15px;
  padding: 2px;
  text-align: center;
  font-size: 13px;
}
.statistics{
  width: calc(20% - 40px);
  margin: 0 10px  ;
  height: 70px;
  float: left;
  background-size: 100% 100%;
  padding: 10px;

  img{
    margin: 10px;
    width: 45px;
    height: 45px;
    float: left;
  }
  div:nth-child(2){
    color: #00E4FF;
    font-size: 16px;
    line-height: 40px;
    font-weight: 700;
  }
  div:nth-child(3){
    color: #FFF;
    font-size: 14px;
    //text-indent: 1em;
    font-weight: 700;
  }
}

.top_button{

  .aDiv{
    position: relative;
    padding: 5px 9px;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    //background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    //background-color: #0f224c;
    //background-image: linear-gradient(to left, #16b1ec, #063558);
    background: linear-gradient(90deg, #16b1ec, #063558, #08b7f3, #0c9dfe);
    box-shadow: inset 0 0 10px #03a9f4;
    background-size: 400%;
    border-radius: 15px;
    z-index: 1;
  }
  .bDiv{
    position: relative;
    padding: 5px 9px;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #d57ac3, #883ab2, #883ab2, #632a8f);
    box-shadow: inset 0 0 10px #632a8f;
    background-size: 400%;
    border-radius: 15px;
    z-index: 1;
  }
  .aDiv:hover{
    animation: animate 8s linear infinite;
  }

  @keyframes animate{
    0%{
      background-position: 0%;
    }
    100%{
      background-position: 400%;
    }
  }

  .aDiv:before{
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: 0.5s;
  }
  .aDiv:hover:before{
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
  }
}

.warpper-top {
  cursor: pointer;
  overflow-y: scroll;
  height: 150px;
  overflow-x: hidden;
  .name {
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    width: 60px;
    height: 30px;
    line-height: 40px;
    float: left;
  }

  .column {
    position: relative;
    margin-left: 60px;
    width: 360px;
    align-items: center;
    .integral-column {
      height: 14px;
      border-radius: 20px 20px 20px 20px;
    }

    .single-column {
      width: 0px;
      height: 14px;
      border-radius: 20px 20px 20px 20px;
      float: left;
      .single-content {
        height: 100%;
        //border-radius: 20px 20px 20px 20px;
      }
    }

    .num {
      font-size: 12px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #efca2e;
      float: right;
      width: 46px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}


</style>

